// 引入API
import {createRouter, createWebHashHistory} from "vue-router"

// 引入了两个页面
const Home = ()=>import("../views/Home.vue")
const About = ()=>import("../views/About.vue")
const NotFound = ()=>import("../views/404.vue")


// 用户中心页
const userCenter = () => import("../views/user-center/index.vue")
const userProfile = () => import("../views/user-center/Profile.vue")
const userSettings = () => import("../views/user-center/Settings.vue")

// 引入Product页面
const Product = () => import("../views/Product.vue")
// 引入Vuex页
const VuexPage = ()=> import("../views/Vuex.vue")

// 引入AxiosTest页
const AxiosTest = ()=> import("../views/AxiosTest.vue")

const routes = [
    {
        path:'/',
        redirect:'/home'
    },
    {
        path: '/home',
        name:'home',
        component: Home
    },
    {
        path: '/about',
        name:'about',
        component: About
    },
    {
        path: '/product/:id',
        name:'product',
        component: Product
    },
    {
        path: '/vuex',
        name:'vuex',
        component: VuexPage
    },
    {
        path: '/axios-test',
        name:'axiosTest',
        component: AxiosTest
    },
    // 用户中心的路由配置
    {
        path: '/user',
        name:'userCenter',
        component: userCenter,
        redirect:'/user/profile',
        children:[
            {
                path: 'profile', // /user/profile
                name:'profile',
                component: userProfile
            },
            {
                path: 'settings', // /user/profile
                name:'settings',
                component: userSettings
            },
        ]
    },
    {
        path: '/:pathMatch(.*)*',
        name:'notFound',
        component: NotFound
    }
]

// 创建了一个路由的实例化对象
const router = createRouter({
    history: createWebHashHistory(),
    routes
})

router.beforeEach((to, from, next)=>{
    console.log('beforeEach触发了');
    console.log('to===>>',to);
    console.log('from===>>',from);
    // 用 about来替代系统设置
    // if(to.name == 'about'){
    //     if(isAdmin) { 
    //         next()
    //     } else {
    //         next({name:'Login'})
    //     }
    // } else {
    //     next()
    // }
    next()
    
})

router.afterEach((to, from)=>{
    console.log("afterEach触发了");
    console.log('to===>>',to);
    console.log('from===>>',from);
})


// route
// router
export default router